<template>
  <div>
    <el-dialog title="批量开卡" :visible.sync="dialogVisible" width="680px">
      <el-form ref="formRef" :model="formdata" label-width="100px" label-position="left" inline :rules="rules">

        <el-row>
          <el-col :span="12">
            <el-form-item label="使用虚拟卡:" prop="useEcard">
              <el-checkbox v-model="formdata.useEcard">使用虚拟卡</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="formdata.useEcard">
            <el-form-item label="开卡数量:" prop="cardCnt">
              <el-input-number v-model="formdata.cardCnt" :step="1" :min="1" :max="20" controls-position="right"
                style="width: 180px;"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="!formdata.useEcard">
          <el-col :span="12">
            <el-form-item label="开始卡号:" prop="startCard">
              <el-input v-model="formdata.startCard" placeholder="请输入" style="width: 180px;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束卡号:" prop="endCard">
              <el-input v-model="formdata.endCard" placeholder="请输入" style="width: 180px;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="单日限额(元):" prop="dailyUpperLimit">
              <el-input v-model="formdata.dailyUpperLimit" placeholder="请输入" style="width: 180px;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单次限额(元):" prop="timesUpperLimit">
              <el-input v-model="formdata.timesUpperLimit" placeholder="请输入" style="width: 180px;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="单月限额(元):" prop="monthUpperLimit">
              <el-input v-model="formdata.monthUpperLimit" placeholder="请输入" style="width: 180px;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelFn">取 消</el-button>
        <el-button type="primary" @click="saveFn" v-loading="saveLoading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    validator
  } from '@/utils/validate';
  import {
    batchAdd
  } from '@/api/fleet';

  export default {
    data() {
      return {
        formdata: {
          useEcard: false,
          cardCnt: 1
        },
        saveLoading: false,
        dialogVisible: false,
        rules: {
          // startCard: [{
          //   required: true,
          //   message: '开始卡号必填',
          //   trigger: ['blur']
          // }],
          // endCard: [{
          //   required: true,
          //   message: '结束卡号必填',
          //   trigger: ['blur']
          // }],
          dailyUpperLimit: [{
            validator: validator.moneyLimitLength
          }],
          timesUpperLimit: [{
            validator: validator.moneyLimitLength
          }],
          monthUpperLimit: [{
            validator: validator.moneyLimitLength
          }],
        }
      }
    },
    methods: {
      open(row) {
        if (row) {
          this.formdata.companyId = row.companyId;
        }
        this.$nextTick(() => {
          this.dialogVisible = true;
        })
      },
      cancelFn() {
        this.$refs.formRef.resetFields();
        this.dialogVisible = false;
      },
      saveFn() {
        this.$refs.formRef.validate(valid => {
          if (valid) {
            if (this.formdata.useEcard) {
              if (this.formdata.cardCnt < 1) {
                this.$message.error('请输入开卡数量');
                this.formdata.startCard = undefined;
                this.formdata.endCard = undefined;
                return
              }
            } else {
              if (!this.formdata.startCard || !this.formdata.endCard) {
                this.$message.error('请输入起止卡号');
                return
              }
            }

            console.log(this.formdata)
            //return
            this.saveLoading = true;
            try {
              batchAdd(this.formdata).then(res => {
                if (res.code === 200) {
                  this.$message.success('操作成功');
                  this.cancelFn()
                }
              })
            } finally {
              this.saveLoading = false;
            }
          }
        })
      }
    }
  }
</script>
